	<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="用户注册"
      left-text="返回登录"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 注册框 -->
    <div class="viewport">
      <div id="logindiv">
        <!-- 用户名 -->
        <p>
          <input
            type="text"
            class="input"
            id="uanme"
            placeholder="请输入用户名"
            v-model="name"
            @blur="checkName"
          />
          <span :class="nameState">{{ nameMsg }}</span>
        </p>
        <!-- 密码 -->
        <p>
          <input
            type="text"
            class="input"
            id="phone"
            placeholder="请输入手机号"
            v-model="phone"
            @blur="checkPhone"
          />
          <span :class="phoneState">{{ phoneMsg }}</span>
        </p>
        <!-- 密码 -->
        <p>
          <input
            type="password"
            class="input"
            id="upwd"
            placeholder="请输入6位登录密码"
            v-model="pwd"
            @blur="checkPwd"
          />
          <span :class="pwdState">{{ pwdMsg }}</span>
        </p>
        <!-- 验证码 -->
        <p style="position: reletive">
          <input
            type="type"
            class="input"
            id="upwd"
            placeholder="随机验证码"
            v-model="valida"
            @blur="checkValida"
          />
          <!-- <img :src="`${this.img}`" alt=""> -->
          <span :class="valiState">{{ valiMsg }}</span>
        </p>
        <!-- 装验证码的图片 -->
        <div id="valida"></div>
        <!-- 同意注册协议 -->
        <p style="padding-bottom: 10px; font-size: 12px; color: gray">
          注册即视为同意<a href="help.html?id=13">《用户注册协议》</a>
        </p>
        <button @click="checkForm">登录</button>
        <p style="padding-top: 10px; font-size: 14px">
          已有帐号<router-link to="/login">
            <strong style="color: #0088cc"> 我要登录>> </strong></router-link
          >
        </p>
      </div>
    </div>
  </div>
</template>
<style>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: black;
}
body {
  background-color: #f8f8f8;
}
/* 登录框样式 */
.viewport {
  min-width: 320px;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 45px;
  -webkit-overflow-scrolling: touch;
}
#logindiv {
  width: 90%;
  height: auto;
  margin: 20px auto;
  padding-bottom: 20px;
  font-family: "\5fae\8f6f\96c5\9ed1";
}
#logindiv p {
  width: 100%;
  position: relative;
}
#logindiv .input {
  width: 92%;
  height: 40px;
  border: 1px #d7d7d7 solid;
  background: #fff;
  line-height: 40px;
  margin-bottom: 10px;
  font: inherit;
  font-size: 15px;
  padding-left: 15px;
  color: #252525;
  border-radius: 3px;
  box-sizing: border-box;
  -webkit-appearance: none;
}
/* 验证账号密码格式 */
/* 格式正确 */
.hidden1 {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
  height: 20px;
  line-height: 20px;
  width: 20px;
  background-color: rgb(7, 209, 7);
  display: inline-block;
  border-radius: 50%;
}
/* 格式不正确 */
.hidden2 {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-top: 5px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  background-color: #e4393c;
  display: inline-block;
  border-radius: 50%;
}
/* 验证码 */
#logindiv p img {
  display: block;
  position: absolute;
  right: 20px;
  top: 12px;
  width: 60px;
  height: 15px;
}
.van-switch {
  left: 303px;
  top: -46px;
}
#logindiv .auto {
  position: relative;
  padding-left: 26px;
  height: 18px;
  line-height: 15px;
  margin-bottom: 10px;
  color: #848689;
  font: inherit;
  font-size: 13px;
}
/* 按钮 */
#logindiv button {
  display: block;
  width: 100%;
  height: 40px;
  background: #f15353;
  color: #fff;
  font: inherit;
  font-size: 17px;
  line-height: 40px;
  text-align: center;
  letter-spacing: 5px;
  border-radius: 5px;
  border: none;
}
</style>
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      //双向绑定的用户名手机密码
      name: "",
      nameState: "",
      nameMsg: "",
      pwd: "",
      pwdState: "",
      pwdMsg: "",
      phone: "",
      phoneState: "",
      phoneMsg: "",
      //双向绑定验证码
      valida: "",
      //img来装生成的svg图像
      img: "",
      valiState: "",
      valiMsg: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push(`/login`);
    },
    checkName() {
      //账号验证
      let reg = /^\w{6,15}$/;
      if (reg.test(this.name) === true) {
        this.nameState = {
          hidden1: true,
          hidden2: false,
        };
        this.nameMsg = `√`;
        return true;
      } else {
        this.nameState = {
          hidden1: false,
          hidden2: true,
        };
        this.nameMsg = "×";
        return false;
      }
    },
    checkPwd() {
      //密码验证
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd) === true) {
        this.pwdState = {
          hidden1: true,
          hidden2: false,
        };
        this.pwdMsg = `√`;
        return true;
      } else {
        this.pwdState = {
          hidden1: false,
          hidden2: true,
        };
        this.pwdMsg = `×`;
        return false;
      }
    },
    checkPhone() {
      //电话验证
      let reg = /^1[3456789]\d{9}$/;
      if (reg.test(this.phone) === true) {
        this.phoneState = {
          hidden1: true,
          hidden2: false,
        };
        this.phoneMsg = `√`;
        return true;
      } else {
        this.phoneState = {
          hidden1: false,
          hidden2: true,
        };
        this.phoneMsg = `×`;
        return false;
      }
    },
    // 检查验证码
    checkValida() {
      // 验证输入的验证码是否符合
      this.axios.get(`/users/register?code=${this.valida}`).then((res) => {
        console.log(res.data);
        if (res.data == "SUCCESS") {
          (this.valiState = {
            hidden1: false,
            hidden2: true,
          }),
            (this.valiMsg = `×`);
        } else {
          (this.valiState = {
            hidden1: true,
            hidden2: false,
          }),
            (this.valiMsg = `√`);
        }
      });
    },
    checkForm() {
      if (this.checkName && this.checkPwd && this.checkPhone) {
        console.log(`正在验证，发送请求成功`);
        this.axios
          .post("/users/reg", {
            uname: this.name,
            upwd: this.pwd,
            phone: this.phone,
          })
          .then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
              Toast.success("注册成功!");
            } else if (res.data.code == 201) {
              Toast.success("用户已存在,请重新注册");
            }
          });
      }
    },
  },
  watch: {
    valida() {
      console.log(this.valida);
    },
  },
  mounted() {
    //生成验证码
    this.axios.get("/users/getCode").then((res) => {
      console.log(res.data);
      this.img = res.data;
      document.getElementById("valida").innerHTML = res.data;
    });
  },
};
</script>